<template>
  <el-form :inline="true" label-width="100px" :model="data">
    <el-divider content-position="left">道路信息</el-divider>
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="道路编号:">
          <span>{{ data.roadId }}</span>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="道路名称:">
          <span>{{ data.roadName }}</span>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="生成时间:">
          <el-date-picker
            v-model="data.generatedTime"
            type="date"
            :readonly="true"
          />
        </el-form-item>
      </el-col>
    </el-row>

    <el-divider content-position="left">平整度检测详情</el-divider>

    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item v-if="data.flatnessId" label="检测人">
          <span>{{ data.flatnessinspector }}</span>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item v-if="data.flatnessId" label="检测人ID:">
          <span>{{ data.flatnessinspectorId }}</span>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item v-if="data.flatnessId" label="检查时间:" required>
          <el-date-picker
            v-model="data.flatnessInspectDate"
            type="date"
          />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="检测状态:">
          <el-tag :type="data.flatnessId!=null ? 'success': 'danger'">{{ data.flatnessId!=null? '已登记' : '未登记' }}</el-tag>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item v-if="data.flatnessId" label="IRI:" required>
          <span v-if="data.isInfo">{{ data.IRI }}</span>
          <el-input v-else v-model="data.IRI" prop="IRI" />
        </el-form-item>
      </el-col>
      <el-col span="12">
        <el-form-item v-if="data.flatnessId" label="备注:">
          <span v-if="data.isInfo">{{ data.flatnessRemarks }}</span>
          <el-input v-else v-model="data.flatnessRemarks" autosize type="textarea" />
        </el-form-item>
      </el-col>
    </el-row>

    <el-divider content-position="left">损害情况检测详情</el-divider>

    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item v-if="data.damageComId" label="检测人:">
          <span>{{ data.damageInspector }}</span>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item v-if="data.damageComId" label="检测人ID:">
          <span>{{ data.damageInspectorId }}</span>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item v-if="data.damageComId" label="检查时间:" required>
          <el-date-picker
            v-model="data.damageInspectDate"
            type="date"
          />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="检测状态:">
          <el-tag :type="data.damageComId!=null ? 'success': 'danger'">{{ data.damageComId!=null? '已登记' : '未登记' }}</el-tag>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item v-if="data.damageComId" label="起止位置:">
          <span v-if="data.isInfo">{{ data.beginSite }}</span>
          <el-input v-else v-model="data.beginSite" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item v-if="data.damageComId" label="损坏类型:">
          <span>{{ data.damageType }}</span>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <el-form-item v-if="data.damageComId" label="检查总长:">
          <span v-if="data.isInfo">{{ data.totalLength }}</span>
          <el-input v-else v-model="data.totalLength" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item v-if="data.damageComId" label="检查总宽:">
          <span v-if="data.isInfo">{{ data.totalWidth }}</span>
          <el-input v-else v-model="data.totalWidth" />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <el-form-item v-if="data.damageComId" label="损坏长:">
          <span v-if="data.isInfo">{{ data.damageLength }}</span>
          <el-input v-else v-model="data.damageLength" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item v-if="data.damageComId" label="损坏宽:">
          <span v-if="data.isInfo">{{ data.damageWidth }}</span>
          <el-input v-else v-model="data.damageWidth" />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <el-form-item v-if="data.damageComId" label="损坏高:">
          <span v-if="data.isInfo">{{ data.damageHeight }}</span>
          <el-input v-else v-model="data.damageHeight" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item v-if="data.damageComId" label="损坏面积:">
          <span>{{ data.damageArea }}</span>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <el-form-item v-if="data.damageComId" label="损害密度:">
          <span>{{ data.damageDensity }}</span>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item v-if="data.damageComId" label="损坏情况描述:">
          <span v-if="data.isInfo">{{ data.desc }}</span>
          <el-input v-else v-model="data.desc" autosize type="textarea" />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <el-form-item v-if="data.damageComId" label="备注:">
          <span v-if="data.isInfo">{{ data.damageRemarks }}</span>
          <el-input v-else v-model="data.damageRemarks" autosize type="textarea" />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row type="flex" class="row-bg" justify="end">
      <el-button @click="colseDialog">取 消</el-button>
      <el-button type="primary" @click="submitForm">保 存</el-button>
    </el-row>
  </el-form>
</template>

<script>
import { toTimeString } from '@/utils/time-handle'
import { updatePavementDamage, updatePavementFlatness } from '@/api/regularInspection'

export default {
  name: 'InfoDetail',
  props: {
    data: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  methods: {
    toTimeString,
    colseDialog() {
      this.$emit('close-dialog')
    },
    submitForm() {
      // bug 时间虽然看起来一样，但父组件拿过来的，展示的是字符串形式的，而不是对象
      if (this.data.flatnessId != null) {
        const mm1 = this.data.flatnessInspectDate.getMonth() + 1
        const dd1 = this.data.flatnessInspectDate.getDate()
        updatePavementFlatness({
          flatnessID: this.data.flatnessId,
          userID: this.data.flatnessinspectorId,
          IRI: this.data.IRI,
          regularInspectionID: this.data.regularInspectionId,
          flatnessDate: [this.data.flatnessInspectDate.getFullYear(),
            (mm1 > 9 ? '' : '0') + mm1,
            (dd1 > 9 ? '' : '0') + dd1
          ].join('-') + ' 00:00',
          remarks: this.flatnessRemarks
        }).then(() => {
          this.$message('submit!')
          this.$emit('close-dialog')
          this.$emit('flatness-submited')
        })
      }
      if (this.data.damageId != null) {
        const mm2 = this.data.damageInspectDate.getMonth() + 1
        const dd2 = this.data.damageInspectDate.getDate()
        updatePavementDamage({
          inspectorID: this.data.damageInspectorId,
          pavementDamageComID: this.data.damageComId,
          regularInspectionID: this.data.regularInspectionId,
          inspectionDate: [this.data.damageInspectDate.getFullYear(),
            (mm2 > 9 ? '' : '0') + mm2,
            (dd2 > 9 ? '' : '0') + dd2
          ].join('-'),
          SAEPlace: this.data.beginSite,
          totalLength: this.data.totalLength,
          totalWidth: this.data.totalWidth,
          damageTypeID: this.data.damageTypeId,
          damageLength: this.data.damageLength,
          damageWidth: this.data.damageWidth,
          damageHeight: this.data.damageHeight,
          damagePAC: this.data.desc,
          remarks: this.data.damageRemarks,
          pavementDamageID: this.data.damageId
        }).then(() => {
          this.$message('submit!')
          this.$emit('close-dialog')
          this.$emit('damage-submited')
        })
      }
    }
  }
}
</script>

